<template>
<div class="box" ref="box">
  <div class="zhanwei">
  <div v-for="ele in arr" class="box2" :key="ele.id" @click="myjump(ele.id)" >
    <img :src="ele.image" :alt="ele.title " @click="myjump(ele.id)" @touch="myjump(ele.id)"/>
    <p @click="myjump(ele.id)" >{{ele.title}}</p>
    <button v-if="ele.title?true:false" @click.stop="myadd({
      id:ele.id,title:ele.title,price:ele.price,img:ele.image
    })" >加入购物车</button>
  </div>
  </div>
</div>
</template>

<script>
import {
  // mapState,
  // mapGetters,
  mapMutations
  // mapActions
} from 'vuex'
import BScroll from 'better-scroll'
export default {
  data () {
    return {
      arr: [],
      start: 0,
      isEnd: false,
      scroll: null,
      flag: false
    }
  },
  methods: {
    ...mapMutations([
      'myadd'
    ]),
    addx (a) {
      console.log(a)
    },

    myjump (id) {
      this.$router.push({
        name: 'product',
        params: {
          id
        }
      })
    },
    initBScroll () {
      // 创建BScroll实例
      this.scroll = new BScroll(
        this.$refs.box, {
          click: true
          // touch: true

        }
      )
      this.scroll.on('touchEnd', (pos) => {
        if (pos.y > 50) {
          this.getData(true)
        }
      })
      this.scroll.on('scrollEnd', (pos) => {
        if (pos.y < this.scroll.maxScrollY + 50) {
          // console.log(pos.y, this.scroll.maxScrollY)
          this.getData()
        }
      })
    },
    getData (isRefresh = false) {
      const start = isRefresh ? 0 : this.start
      if (this.isEnd && !isRefresh) {
        return false
      }
      // console.log(this.$route.params.id)
      // console.log(this.$router)

      this.$http.getProductList(this.$route.params.id, start)
        .then(res => {
          // console.log(this.$route.params.id)
          if (res.data.code === 200) {
            const baselist = isRefresh ? [] : this.arr
            this.arr = baselist.concat(
              res.data.data.items.list.filter((ele) => {
                return ele.type !== 2
              })
            )
            this.start = res.data.data.items.nextIndex
            this.isEnd = res.data.data.items.isEnd
            this.$nextTick(() => {
              if (!this.scroll) {
                this.initBScroll()
              }
            })
            // setTimeout(() => {
            //   if (!this.scroll) {
            //     this.initBScroll()
            //   }
            // }, 0)
          }
        })
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getData()
    })
  },
  beforeRouteUpdate (to, from, next) {
    // console.log('up' + to.params.id)

    next()
    this.getData(true)
  }
}
</script>

<style scoped lang="scss">

  .box2{
    width:100%;
    box-sizing: border-box;
    // padding: 10px;
    text-align: center;
     overflow-x: hidden;
      margin-top: 40px;
      margin-bottom: 41px;
    img{
      width: 50%;
      float: left;
    }
    p{
      width:45%;
      // font-weight: 600;
      font-size: 14px;
      text-align: center;
      // color:red;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      // display: -webkit-inline-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    button{
      // display:block;
      margin-top:30px;
      margin-left: 10px;
      padding: 3px;
      background-color:#0af;
      border-radius: 15px;
      border: none;
      outline: none;
      color:#fff;
      float: left;
    }
    .price{
      color: #f00;
    }
  }

</style>
